<template>
    <el-row>
        <el-col :span="24">
            <el-row class="header_home" justify="space-between">
                <el-image style="width: auto; height: auto;" :src="imgUrl" />
                <el-input v-model="commodityName" style="width: 30%;height: 50%;margin-right: 2%;" placeholder="搜索商品..."
                    size="large">
                    <template #append>
                        <el-button :icon="Search" @click="searchCommodity" />
                    </template>
                </el-input>
            </el-row>
        </el-col>
        <el-col :span="24" style="padding: 2%;" v-show="!isEmpty">
            <el-text style="width: 100%;font-size: larger;">为您找到以下商品：</el-text>
        </el-col>
        <el-col :span="24" v-show="!isEmpty" align="middle">
            <el-space wrap fill-ratio="" fill>
                <div v-for="item in commodities" :key="item.gid">
                    <el-card shadow="hover" style="width: 250px;height: 380px;border-radius: 15px;"
                        @click="goCommodity(item.gid!)">
                        <el-row align="middle" justify="center">
                            <el-col :span="24">
                                <el-image :src="`/api/image/${item.image?.url}`" style="width: 100%;height: 200px;"
                                    fit="contain" />
                            </el-col>
                            <el-col :span="24" align="start">
                                <el-text style="font-size: larger;" line-clamp="2">{{ item.commodityName
                                    }}</el-text>
                            </el-col>
                            <el-col :span="24" align="start">
                                <el-text style="color: gray;" line-clamp="2">{{ item.description }}</el-text>
                            </el-col>
                            <el-col :span="24" align="end">
                                <el-text style="color: red;font-size: large;">¥ {{ item.price }}</el-text>
                            </el-col>
                            <el-col :span="24" style="margin-top: 5%;height: max-content;">
                                <el-row style="width: 100%;">
                                    <el-col :span="24" align="start">
                                        <el-text>浏览量：{{ item.browse }}</el-text>
                                        <el-text style="margin-left: 10%;">评分：{{ item.point }}</el-text>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
            </el-space>
        </el-col>
        <el-col :span="24">
            <el-empty v-show="isEmpty" style="width: 100%;padding: 10%;" description="这里空空如也～" />
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { queryCommodityByName, queryCommodityByType } from '../assets/net/NetUtils.ts';
import { useRoute } from 'vue-router';
import { imgUrl } from '../assets/common/constants.ts';
import { CommodityModel } from '../assets/model/Commodity.ts';
import router from '../router/index.ts';

const route = useRoute();
const isEmpty = ref<boolean>()
const commodities = ref<Array<CommodityModel>>()
const commodityName = ref<string>()

onMounted(() => {
    if (Number(route.query.way) === 0) {
        queryCommodityByName(String(route.query.arg))
            .then((value) => {
                commodities.value = value.data;
                isEmpty.value = value.data.length === 0 ? true : false;
            })
    } else {
        queryCommodityByType(String(route.query.arg))
            .then((value) => {
                commodities.value = value.data;
                isEmpty.value = value.data.length === 0 ? true : false;
            })
    }
});

const searchCommodity = () => {
    queryCommodityByName(commodityName.value!)
        .then((value) => {
            commodities.value = value.data;
            isEmpty.value = value.data.length === 0 ? true : false;
        })
}

const goCommodity = (gid: number) => {
    router.push({
        path: '/commodity',
        query: {
            gid: gid
        }
    })
}
</script>

<style>
.commodities {
    padding: 2%;
}
</style>